{% extends "auth-menu.html" %}
{% load tag %}
{% block head %}
<meta http-equiv="refresh" content="60">
{% endblock %}


{% block index_active %}
    'active'
{% endblock %}——




{% block main %}

   <div class='span12'>
        <div class='page-header'>
            <h1 class='pull-left'>
                <i class='icon-edit'></i>
                <span>主页</span>
            </h1>
            <div class='pull-right'>
                <ul class='breadcrumb'>
                    <li>
                        <a href="/index"><i class='icon-bar-chart'></i>
                        </a>
                    </li>
                    <li class='separator'>
                        <i class='icon-angle-right'></i>
                    </li>
                    <li>
                        IDC资源情况
                    </li>
                    <li class='separator'>
                        <i class='icon-angle-right'></i>
                    </li>
                    <li class='active'>(未完成)</li>
                </ul>
            </div>
        </div>
    </div>

    <div class='span5'>
    <div id="main1" style="width: 400px;height:430px;"></div>
    <script type="text/javascript">

var Chart1 = echarts.init(document.getElementById('main1'));
// 指定图表的配置项和数据

    Chart1.showLoading({
        text: '正在努力的读取数据中...'
    });


option = {
    tooltip : {
        formatter: "{a} <br/>{b} : {c}%"
    },

    title : {
        show : true,
        text:'IDC CPU使用情况',
         x:'center',
        subtext:'CPU总计:{{ cputotal }}GHz   CPU使用:{{ cpuusage }}GHz',
        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
            fontWeight: 'bolder'
        }
    },
    toolbox: {
        show : true,
        feature : {
{#            mark : {show: true},#}
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    series : [
        {
            name:'CPU使用率',
            type:'gauge',
            splitNumber: 10,       // 分割段数，默认为5
            axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
                    width: 8
                }
            },
            axisTick: {            // 坐标轴小标记
                splitNumber: 10,   // 每份split细分多少段
                length :12,        // 属性length控制线长
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: 'auto'
                }
            },
            axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    color: 'auto'
                }
            },
            splitLine: {           // 分隔线
                show: true,        // 默认显示，属性show控制显示与否
                length :30,         // 属性length控制线长
                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                    color: 'auto'
                }
            },
            pointer : {
                width : 5
            },
            title : {
                show : true,
                offsetCenter: [0, '-40%'],       // x, y，单位px
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    fontWeight: 'bolder'
                }
            },
            detail : {
                formatter:'{value}%',
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    color: 'auto',
                    fontWeight: 'bolder'
                }
            },
            data:[{value: {{ cpu_usage }}, name: 'CPU使用率'}]
        }
    ]
};



    Chart1.setOption(option);
    {#        // 使用刚指定的配置项和数据显示图表。#}


    Chart1.hideLoading();


    </script>
</div>
    <div class='span6'>
    <div id="main2" style="width: 800px;height:430px;"></div>
    <script type="text/javascript">

var Chart2 = echarts.init(document.getElementById('main2'));
// 指定图表的配置项和数据

    Chart2.showLoading({
        text: '正在努力的读取数据中...'
    });

option = {
    tooltip : {
        formatter: "{a} <br/>{c} {b}"
    },
    toolbox: {
        show : true,
        feature : {
{#            mark : {show: true},#}
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    title : {
        show : true,
        text:'                          IDC 内存情况',
        x:55,
        y:0,
        subtext:'内存总计:{{ memtotal }}G  内存置备:{{ mem_commit }}G 内存使用:{{ memusage }}G',
        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
            fontWeight: 'bolder'
        }
    },
    series : [
        {
            name:'mem',
            type:'gauge',
             splitNumber: 10,       // 分割段数，默认为5
            axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
                    width: 8
                }
            },
            axisTick: {            // 坐标轴小标记
                splitNumber: 10,   // 每份split细分多少段
                length :12,        // 属性length控制线长
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: 'auto'
                }
            },
            axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    color: 'auto'
                }
            },
            splitLine: {           // 分隔线
                show: true,        // 默认显示，属性show控制显示与否
                length :30,         // 属性length控制线长
                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                    color: 'auto'
                }
            },
            pointer : {
                width : 5
            },
            title : {
                show : true,
                offsetCenter: [0, '-40%'],       // x, y，单位px
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    fontWeight: 'bolder'
                }
            },
            detail : {
                formatter:'{value}%',
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    color: 'auto',
                    fontWeight: 'bolder'
                }
            },
            data:[{value: {{ mem_usage }}, name: '内存使用率'}]
        },
        {
            name:'内存分配率',
            type:'gauge',
            center : ['15%', '55%'],    // 默认全局居中
            radius : '50%',    //与 主仪表盘   大小比例
            splitNumber: 10,       // 分割段数，默认为5
            axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
                    width: 8
                }
            },
            axisTick: {            // 坐标轴小标记
                splitNumber: 10,   // 每份split细分多少段
                length :12,        // 属性length控制线长
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: 'auto'
                }
            },
            axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    color: 'auto'
                }
            },
            splitLine: {           // 分隔线
                show: true,        // 默认显示，属性show控制显示与否
                length :30,         // 属性length控制线长
                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                    color: 'auto'
                }
            },
            pointer : {
                width : 5
            },
            title : {
                show : true,
                offsetCenter: [0, '-40%'],       // x, y，单位px
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    fontWeight: 'bolder'
                }
            },
            detail : {
                formatter:'{value}%',
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    color: 'auto',
                    fontWeight: 'bolder'
                }
            },
            data:[{value: {{ mem_commit_usage }}, name: '内存分配率'}]
        },
    ]
};

    Chart2.setOption(option);
    {#        // 使用刚指定的配置项和数据显示图表。#}


    Chart2.hideLoading();

    </script>


</div>


 <div class='span6'>
    <div id="main3" style="width: 550px;height:380px;"></div>
    <script type="text/javascript">

var Chart3 = echarts.init(document.getElementById('main3'));
// 指定图表的配置项和数据

    Chart3.showLoading({
        text: '正在努力的读取数据中...'
    });
option = {
    title : {
        text: '数据源流量',
        subtext: '出租车:{{ taxi }}M,客运:{{ keyun }}M,货运{{ huoyun }}M,UGC:{{ ugc }}M',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient : 'vertical',
        x : 'left',
        data:[]
    },
    toolbox: {
        show : true,
        feature : {
{#            mark : {show: true},#}
{#            dataView : {show: true, readOnly: false},#}
{#            magicType : {#}
{#                show: true,#}
{#                type: ['pie', 'funnel'],#}
{#                option: {#}
{#                    funnel: {#}
{#                        x: '25%',#}
{#                        width: '50%',#}
{#                        funnelAlign: 'center',#}
{#                        max: 57#}
{#                    }#}
{#                }#}
{#            },#}
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
        xAxis : [
        {
            type : 'category',

            data : ['客运','货运','UGC','出租车'],
        }
    ],
        yAxis : [
        {
            type : 'value',
            max:50,
        }
    ],
    series : [
{#        {  饼图 注释#}
{#            name:'数据源来源',#}
{#            type:'bar',#}
{#            radius : '55%',#}
{#            center: ['50%', '60%'],#}
{#            data:[#}
{#                {value:{{ keyun }}, name:'客运'},#}
{#                {value:{{ huoyun }}, name:'货运'},#}
{#                {value:{{ ugc }}, name:'UGC'},#}
{#                {value:{{ taxi }}, name:'出租车'},#}
{#            ]#}
{#        }#}
            {
            name:'数据源来源',
            type:'bar',
            data:[{{ keyun}},{{ huoyun }},{{ ugc }},{{ taxi }}],
            markPoint : {
                data : [
                    {type : 'max', name: '最大值'},
                    {type : 'min', name: '最小值'}
                ]
            },

        },
    ]
};


    Chart3.setOption(option);
    {#        // 使用刚指定的配置项和数据显示图表。#}


    Chart3.hideLoading();

    </script>


</div>

 <div class='span5'>
    <div id="main4" style="width: 550px;height:380px;"></div>
    <script type="text/javascript">

var Chart4 = echarts.init(document.getElementById('main4'));
// 指定图表的配置项和数据

    Chart4.showLoading({
        text: '正在努力的读取数据中...'
    });
option = {
    title : {
        text: 'NAS 数据存储使用情况',
        subtext: '单位 GB',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient : 'vertical',
        x : 'left',
{#        data:["GPS","FCD融合多车","剩余空间"],#}
        data:[
                {% for i in  nas_title %}
                    '{{ i }}',
                {% endfor %}

        ],
    },
    toolbox: {
        show : true,
        feature : {
{#            mark : {show: true},#}
            dataView : {show: true, readOnly: false},
            magicType : {
                show: true,
                type: ['pie', 'funnel'],
                option: {
                    funnel: {
                        x: '25%',
                        width: '50%',
                        funnelAlign: 'left',
                        max: {{ nas_total|safe }},
                    }
                }
            },
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    series : [
        {
            name:'使用情况',
            type:'pie',
            radius : '55%',
            center: ['50%', '60%'],
         itemStyle : { normal:
                         {label :
                          {show: true, position: 'bottom',formatter:"{b} ({d}%)"}
                         }
                        },
{#            data:[{'name': 'GPS', 'value': 7091}, {'name': 'FCD融合多车', 'value': 4090},{'name': '剩余空间', 'value': 4494}],#}
        data:[
            {% for i in nas_list %}
            {'name': '{{ i.name }}','value':{{ i.value }} },
{#                {{ i }}#}
        {% endfor %}
        ],
        }
    ]
};


    Chart4.setOption(option);
    {#        // 使用刚指定的配置项和数据显示图表。#}


    Chart4.hideLoading();

    </script>


</div>

 <div class='span5'>
    <table border="1" align="center">


    <tr>
        <td>虚拟机数量</td><td>{{ total_vps }}</td>
    </tr>

    <tr>
        <td>存储内虚拟机</td><td>{{ storage_vps }}</td>
    </tr>

    <tr>
        <td>主机数量</td><td>{{ total_host }}</td>
    </tr>

    <tr>
        <td>集群内主机</td><td>{{ cluster_host }}</td>
    </tr>
    <tr>
        <td>盘阵容量</td><td>{{ total_space }}T</td>
    </tr>
        <tr>
        <td>盘阵剩余空间</td><td>{{ free_space }}T</td>
    </tr>

    <tr>
        <td>盘阵已占用</td><td>{{ commit_storage }}T</td>
    </tr>
    <tr>
        <td>盘阵未占用</td><td>{{ uncommit_storage }}T</td>
    </tr>
    <tr>
        <td>盘阵不能共享</td><td>{{ unshare_storage }}T</td>
    </tr>
</table>
 </div>
{% endblock %}